import { ref, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 拦截规则
const rules = ref([])

// API配置
const apiConfig = reactive({
  baseUrl: 'https://api.xiaocai.com',
  token: '',
  timeout: 30,
  retry: true,
  retryCount: 3
})

// 存储配置
const storageConfig = reactive({
  autoSync: true,
  maxLocalItems: 1000,
  retentionDays: 30
})

// 高级配置
const advancedConfig = reactive({
  debugMode: false,
  enableNotification: true,
  logLevel: 'info',
  encryptData: false
})

// 从存储中加载配置
const loadConfig = () => {
  chrome.storage.local.get(['interceptionRules', 'apiConfig', 'storageConfig', 'advancedConfig'], (result) => {
    console.log('🔧 从存储中加载所有配置:', result);
    
    // 加载拦截规则
    if (result && result.interceptionRules) {
      // 检查是否为数组格式
      if (Array.isArray(result.interceptionRules)) {
        rules.value = result.interceptionRules;
        console.log('✅ 已加载自定义拦截规则:', rules.value.length, '条');
      } else if (typeof result.interceptionRules === 'object') {
        // 如果是对象格式，转换为数组
        const rulesArray = Object.values(result.interceptionRules);
        if (Array.isArray(rulesArray)) {
          rules.value = rulesArray;
          console.log('✅ 已加载自定义拦截规则(对象格式已转换):', rules.value.length, '条');
        } else {
          console.log('ℹ️ 未找到自定义规则，使用默认规则');
        }
      } else {
        console.warn('⚠️ 拦截规则格式不正确:', result.interceptionRules);
      }
    } else {
      console.log('ℹ️ 未找到自定义规则，使用默认规则');
    }
    
    // 加载API配置
    if (result && result.apiConfig) {
      Object.assign(apiConfig, result.apiConfig);
      console.log('✅ 已加载API配置');
    }
    
    // 加载存储配置
    if (result && result.storageConfig) {
      Object.assign(storageConfig, result.storageConfig);
      console.log('✅ 已加载存储配置');
    }
    
    // 加载高级配置
    if (result && result.advancedConfig) {
      Object.assign(advancedConfig, result.advancedConfig);
      console.log('✅ 已加载高级配置');
    }
  });
}

// 保存所有配置到存储
const saveAllConfigToStorage = () => {
  console.log('💾 准备保存所有配置到存储');
  console.log('  - 拦截规则:', rules.value);
  console.log('  - API配置:', apiConfig);
  console.log('  - 存储配置:', storageConfig);
  console.log('  - 高级配置:', advancedConfig);
  
  chrome.storage.local.set({
    interceptionRules: rules.value,  // 确保保存的是数组格式
    apiConfig: apiConfig,
    storageConfig: storageConfig,
    advancedConfig: advancedConfig
  }, () => {
    if (chrome.runtime.lastError) {
      console.error('❌ 保存配置到存储失败:', chrome.runtime.lastError);
      ElMessage.error('配置保存失败: ' + chrome.runtime.lastError.message);
    } else {
      console.log('✅ 所有配置已保存到存储');
      // ElMessage.success('配置保存成功');
    }
  });
}

// 监听所有配置变化并自动保存
watch(rules, () => {
  saveAllConfigToStorage();
}, { deep: true });

watch(apiConfig, () => {
  saveAllConfigToStorage();
}, { deep: true });

watch(storageConfig, () => {
  saveAllConfigToStorage();
}, { deep: true });

watch(advancedConfig, () => {
  saveAllConfigToStorage();
}, { deep: true });

// 添加规则
const addRule = (rule) => {
  const newRule = {
    id: 'rule_' + Date.now(),
    name: rule.name,
    urlPattern: rule.urlPattern,
    matchType: rule.matchType || 'includes',  // 添加匹配类型字段
    method: rule.method || '',  // 添加HTTP方法字段
    apiEndpoint: rule.apiEndpoint,
    dataType: rule.dataType || 'other',  // 添加数据类型字段
    enabled: rule.enabled !== undefined ? rule.enabled : true,
    captureHtml: rule.captureHtml || false,  // 添加捕获HTML字段
    extractShopId: rule.extractShopId || false,  // 添加提取ShopId字段
    targetShopIds: rule.targetShopIds || [],  // 添加目标ShopId列表字段
    description: rule.description || '',  // 添加描述字段
    loading: false,
    createTime: new Date().toISOString().split('T')[0]
  }
  rules.value.push(newRule)
  console.log('➕ 添加新规则:', newRule);
  ElMessage.success('规则添加成功')
  // 手动触发保存配置
  saveAllConfigToStorage();
}

// 编辑规则
const editRule = (rule) => {
  const index = rules.value.findIndex(r => r.id === rule.id)
  if (index !== -1) {
    // 直接修改原有对象的属性，保持对象引用不变
    rules.value[index].name = rule.name
    rules.value[index].urlPattern = rule.urlPattern
    rules.value[index].matchType = rule.matchType || 'includes'  // 添加匹配类型字段
    rules.value[index].method = rule.method || ''  // 添加HTTP方法字段
    rules.value[index].apiEndpoint = rule.apiEndpoint
    rules.value[index].dataType = rule.dataType || 'other'  // 添加数据类型字段
    rules.value[index].enabled = rule.enabled
    rules.value[index].captureHtml = rule.captureHtml || false  // 添加捕获HTML字段
    rules.value[index].extractShopId = rule.extractShopId || false  // 添加提取ShopId字段
    rules.value[index].targetShopIds = rule.targetShopIds || []  // 添加目标ShopId列表字段
    rules.value[index].description = rule.description || ''  // 添加描述字段
    console.log('✏️ 编辑规则:', rules.value[index]);
    ElMessage.success('规则更新成功')
    // 手动触发保存配置
    saveAllConfigToStorage();
  } else {
    console.warn('⚠️ 未找到要编辑的规则:', rule.id);
  }
}

// 删除规则
const deleteRule = (rule) => {
  ElMessageBox.confirm(
    `确定要删除规则 "${rule.name}" 吗？此操作可以恢复。`,
    '删除确认',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    const index = rules.value.findIndex(r => r.id === rule.id)
    if (index !== -1) {
      const deletedRule = rules.value.splice(index, 1)[0];
      console.log('🗑️ 删除规则:', deletedRule);
      ElMessage.success('规则已删除')
      // 手动触发保存配置
      saveAllConfigToStorage();
    } else {
      console.warn('⚠️ 未找到要删除的规则:', rule.id);
    }
  })
  .catch(() => {
    // 用户取消删除
    ElMessage.info('已取消删除')
  })
}

// 切换规则状态
const toggleRule = (rule) => {
  rule.loading = true
  // 模拟异步操作
  setTimeout(() => {
    // 注意：el-switch的v-model已经自动更新了rule.enabled的值
    // 我们不需要再手动翻转rule.enabled = !rule.enabled
    rule.loading = false
    console.log('🔄 切换规则状态:', rule.name, '->', rule.enabled ? '启用' : '禁用');
    ElMessage.success(`规则已${rule.enabled ? '启用' : '禁用'}`)
    // 手动触发保存配置
    saveAllConfigToStorage();
  }, 500)
}

// 保存API配置
const saveApiConfig = () => {
  saveAllConfigToStorage();
  ElMessage.success('API配置已保存')
}

// 初始化时加载配置
loadConfig();

// 导出函数，供外部调用加载配置
export function useConfig() {
  return {
    rules,
    apiConfig,
    storageConfig,
    advancedConfig,
    addRule,
    editRule,
    deleteRule,
    toggleRule,
    saveApiConfig,
    loadConfig  // 导出loadConfig函数供外部调用
  }
}